<template>
	<view>
		<u-popup :show="popupShow" mode="center">
			<view style="width: 90vw;" :style="{height: '460rpx'}" class="padding20">
				<view class="acea-row row-middle row-between">
					<view class="title padding20">输入标签</view>
					<view @click="popupShow = false"><u-icon name="close" size="20"></u-icon></view>
				</view>
				<view class="list">
					<view class="module">
						<view class="textacea-box">
							<textarea placeholder=" " v-model="supplementText" :maxlength="maxLength"></textarea>
							<view class="num-text">
								{{supplementText.length}}/{{maxLength}}
							</view>
						</view>
					</view>
					<view style="color: red;font-size: 24rpx;margin-bottom:15rpx;">提示：多个标签用逗号分割</view>
					<u-button type="error" text="确定添加" class="mt20" @click="addConfirm"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupShow: false,
				supplementText: '',
				maxLength: 50
			}
		},
		methods: {
			addConfirm() {
				this.popupShow = false;
				if( !this.supplementText.length>0) return
				this.$emit('addConfirm',this.supplementText?this.supplementText.replace(/，/g,',').split(','):[])
				this.supplementText = "";
			}
		}
	}
</script>

<style>
	.title {
		font-size: 22px;
		text-align: center;
		font-weight: 500;
		flex: 1
	}
	.list .textacea-box {
		width: 100%;
		height: 154rpx;
		border-radius: 10rpx;
		background: rgba(247, 247, 247, 1);
		overflow: hidden;
		margin-top: 30rpx;
	}
	
	.list .textacea-box textarea {
		display: block;
		width: 100%;
		height: 100rpx;
		padding: 30rpx;
		font-size: 28rpx;
	}
	
	.list .textacea-box .num-text {
		width: 100%;
		line-height: 50rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(145, 145, 145, 1);
		padding-right: 30rpx;
	}
</style>